<template>
  <div id="home-nav">
    <!--顶部购物街固定-->
    <nav-bar id="nav-bar-jie"><div slot="center" class="navBarSlot">购物街</div></nav-bar>

    <tab-control v-show="isControl" class="tab-control" @controlClick="controlsClick" ref="tabControls2" :titles="['流行','新款','精选']"></tab-control>

    <better-scroll
      ref="betScroll"
      class="content"
      :probe-type="3"
      :pullup="true"
      @scrollToEnd="betScroll"
      :listen-scroll="true"
      @scroll="scrollControl"
    >
      <hom-swiper :banner="banners"></hom-swiper>
      <recommend-view :recommend="recommend"></recommend-view>
      <feature-view></feature-view>
      <tab-control @controlClick="controlsClick" :titles="['流行','新款','精选']" ref="tabControls"></tab-control>
      <goods-list :goodsCommodity="showGoodsList"></goods-list>
    </better-scroll>

    <back-top v-show="isBackTop" @backTopEmit="backTopEmits"></back-top>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import HomSwiper from "views/home/children/HomSwiper";
  import RecommendView from "views/home/children/RecommendView";
  import FeatureView from "views/home/children/FeatureView";
  import TabControl from "components/content/tabcontrol/TabControl";
  import GoodsList from "components/content/goods/GoodsList";
  import BetterScroll from "components/common/betterScroll/BetterScroll";
  import BackTop from "components/content/backTop/BackTop";

  import {getHomeSwiper,getHomeData} from "network/home";
  import {Debounce,Throttle} from "common/util";

  export default {
    name: "Home",
    components: {
      getHomeSwiper,
      getHomeData,
      NavBar,
      HomSwiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodsList,
      BetterScroll,
      Throttle,
      Debounce,
      BackTop
    },
    data(){
      return {
        banners: [],
        recommend: [],
        goodsList: {
          'pop': {page: 1,list: []},
          'new': {page: 1,list: []},
          'sell': {page: 1,list: []}
        },
        currentType: 'pop', //tabControl的类型
        isControl: false,
        isBackTop: false,
        scrollY: 0
      };
    },
    computed: {
      showGoodsList(){
        return this.goodsList[this.currentType].list;
      },
      judgeType: {
        get: function(){},
        set: function(index) {
          if (index === 0){
            this.currentType = 'pop';
          }else if(index === 1){
            this.currentType = 'new';
          }else if (index === 2){
            this.currentType = 'sell';
          }
        }
      },
      getHeight(){
        return this.$refs.tabControls.$el.offsetTop;
      }
    },
    methods: {
      /**
       * 回到顶部
       */
      backTopEmits(){
        this.$refs.betScroll.scrollTo(0,0,3000);
      },
      /**
       * tabControl悬浮固定
       */
      scrollControl(pos){
        -pos.y >= 1000 ? this.isBackTop = true : this.isBackTop = false;
        -pos.y >= this.getHeight ? this.isControl = true : this.isControl = false;
        this.scrollY = pos.y;
      },
      /**
       * 下拉刷新
       */
      betScroll(){
        this.getHomeProducts(this.currentType);
      },
      /**
       * 获取轮播图数据
       */
      getHomeSwiper(){
        getHomeSwiper()
          .then(res => {
            this.banners = res.data.data.banner.list;
            this.recommend = res.data.data.recommend.list;
          })
          .catch(err => {
            console.log(err);
          });
      },
      /**
       * 获取商品信息
       * @param type 请求的类型
       */
      getHomeProducts(type){
        getHomeData(type,this.goodsList[type].page)
          .then(res => {
            this.goodsList[type].list.push(...res.data.data.list);
            this.goodsList[type].page += 1;
          })
          .catch(err => {
            console.log(err + "请求错误");
          });
      },
      /**
       * TabControl选中点击事件
       * @param index
       */
      controlsClick(index){
        this.judgeType = index;
        this.$refs.tabControls.currentIndex = index;
        this.$refs.tabControls2.currentIndex = index;

        this.$refs.betScroll.scrollTo(0,this.isControl ? -this.getHeight : this.scrollY,0);
      },
      /**
       * 重新计算高度值
       */
      debouncesBus(){
        var debounces = Debounce(this.$refs.betScroll.refresh,50);

        this.$bus.$on("scrollLoadImgs",()=>{
          debounces();
        });
      }
    },
    created() {
      // 轮播图
      this.getHomeSwiper();
      // 获取商品数据
      this.getHomeProducts('pop');
      this.getHomeProducts('new');
      this.getHomeProducts('sell');
    },
    mounted() {
      //图片加载完成重新刷新
      this.debouncesBus();
    },
    activated() {
      this.$nextTick(() => {
        this.$refs.betScroll.scrollTo(0,this.scrollY,0);
      });
    },
    deactivated(){
      this.scrollY = this.$refs.betScroll.getCurrentY();
    }
  }
</script>

<style scoped>
  #home-nav{
    height: 100vh;
    position: relative;
  }
  .navBarSlot{
    font-size: 15px;
  }
  #nav-bar-jie{
    background-color: var(--color-tint);
    color: white;
    z-index: 999;
  }
  .wrapper{
    overflow: hidden;
    position: absolute;
    top: 49px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  .tab-control{
    position: relative;
    z-index: 9999;
  }
</style>